<template>
  <nav class="home">
    <ul v-for="item in tap">
      <li @click='_goto(item)'>{{item}}</li>
    </ul>
  </nav>
</template>

<script>
  export default {
    name: 'home',

    //Vue 实例的数据都保存在 data 对象中，Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。
    data() {
      return {
        tap: ['demo','flex','grid','svgLoading','touchmove_prevent','CSSSkill','img','retinajs','insertDemo','lazyload','vuex','axios','router','slide','scrollAnimation','QRCode','transition','noticeTip']
      }
    },

    mounted() {

    },

    //methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
    methods: {

//    1.$route.path
//     字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。
//    2.$route.params
//     一个 key/value 对象，包含了 动态片段 和 全匹配片段，如果没有路由参数，就是一个空对象。
//    3.$route.query
//     一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。
//    4.$route.hash
//     当前路由的 hash 值 (不带 #) ，如果没有 hash 值，则为空字符串。
//    5.$route.fullPath
//     完成解析后的 URL，包含查询参数和 hash 的完整路径。
//    6.$route.matched
//     一个数组，包含当前路由的所有嵌套路径片段的 路由记录 。路由记录就是 routes 配置数组中的对象副本（还有在 children 数组）。
      _goto(event) {
        this.$router.push('/'+event+'');
      }

    },

    //计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue
    //methods 和 computed 看起来可以做同样的事情，单纯看结果两种方式确实是相同的。
    //然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变
    //时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，
    //而不必再次执行函数。相比而言，只要发生重新渲染，method 调用总会执行该函数。
    computed: {

    },

    //一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue
    watch: {

    },

    //导航守卫beforeRouteLeave
    //to:router 即将要进入的路由对象
    //from:router  当前导航正要离开的路由
    //next()进行管道中的下一个钩子
    beforeRouteLeave(to, from, next) {
      //console.log(to);
      // 设置下一个路由的 meta
      //to.meta.keepAlive = true; // 让 A 缓存，即不刷新
      next();
    }


    //生命周期钩子的一些使用方法：

    //beforecreate : 可以在这加个loading事件，在加载实例时触发
    //created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
    //mounted : 挂载元素，获取到DOM节点
    //updated : 如果对数据统一处理，在这里写上相应函数
    //beforeDestroy : 可以做一个确认停止事件的确认框
    //nextTick : 更新数据后立即操作dom

//      data: {
//        message: "Roko is boy"
//      }
//      ,
//      beforeCreate: function () {
//        console.group('beforeCreate 创建前状态===============》');
//        console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
//        console.log("%c%s", "color:red", "data   : " + this.$data); //undefined
//        console.log("%c%s", "color:red", "message: " + this.message)
//      }
//      ,
//      created: function () {
//        console.group('created 创建完毕状态===============》');
//        console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
//        console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
//        console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
//      }
//      ,
//      beforeMount: function () {
//        console.group('beforeMount 挂载前状态===============》');
//        console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化
//        console.log(this.$el);
//        console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
//        console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
//      }
//      ,
//      mounted: function () {
//        console.group('mounted 挂载结束状态===============》');
//        console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
//        console.log(this.$el);
//        console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
//        console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
//      }
//      ,
//      beforeUpdate: function () {
//        console.group('beforeUpdate 更新前状态===============》');
//        console.log("%c%s", "color:red", "el     : " + this.$el);
//        console.log(this.$el);
//        console.log("%c%s", "color:red", "data   : " + this.$data);
//        console.log("%c%s", "color:red", "message: " + this.message);
//      }
//      ,
//      updated: function () {
//        console.group('updated 更新完成状态===============》');
//        console.log("%c%s", "color:red", "el     : " + this.$el);
//        console.log(this.$el);
//        console.log("%c%s", "color:red", "data   : " + this.$data);
//        console.log("%c%s", "color:red", "message: " + this.message);
//      }
//      ,
//      beforeDestroy: function () {
//        console.group('beforeDestroy 销毁前状态===============》');
//        console.log("%c%s", "color:red", "el     : " + this.$el);
//        console.log(this.$el);
//        console.log("%c%s", "color:red", "data   : " + this.$data);
//        console.log("%c%s", "color:red", "message: " + this.message);
//      }
//      ,
//      destroyed: function () {
//        console.group('destroyed 销毁完成状态===============》');
//        console.log("%c%s", "color:red", "el     : " + this.$el);
//        console.log(this.$el);
//        console.log("%c%s", "color:red", "data   : " + this.$data);
//        console.log("%c%s", "color:red", "message: " + this.message)
//      }
  }
</script>

<style lang="scss" scoped>
  .home {
    li {
      font-size: .18rem;
      color: #000;
      line-height: .5rem;
      text-align: center;
      border-bottom: 1px solid #DDD;
    }
  }

  /*移动端根据设备分辨率缩小线宽*/
  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .home {
      li {
        border-width: 0.5px;
      }
    }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 3) {
    .home {
      li {
        border-width: 0.33px;
      }
    }
  }
</style>
